<template>
    <div class="w750" :class="themes.theme">
        <div class="extension-apply">
            <div class="rich-text" style="font-size: 13px; line-height: 20px">
                <p v-if="content" v-html="content" class="extensionImg" style="padding: 10px">
                    {{ content }}
                </p>
                <template v-else>
                    <Noempty :pic="require('@/assets/images/order-empty.png')" :title="'暂无规则详情说明'" />
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import { mapState } from 'vuex'
import { getShareRule } from 'api/extensionApi'

export default {
    components: { Noempty },
    data() {
        return {
            content: null
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    mounted() {
        this.getRuleDetail()
    },
    methods: {
        getRuleDetail() {
            getShareRule().then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }
                this.content = res.result
            })
        }
    }
}
</script>
<style src="../../../assets/css/extension.css" scoped></style>
<style src="../../../assets/css/empty.css" scoped></style>
<style scoped>
.extensionImg >>> img {
    max-width: 100% !important;
}
</style>
